<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外卖APP</title>

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="assets/css/common.less">

    <!-- 主页页面 -->
    <link rel="stylesheet/less" href="assets/css/index.less">
</head>
<body>
    <!-- 主页 -->
    <div class="box">
        <!-- 搜索框 -->
        <div class="sousuo">
            <div class="emo">
                <div class="bui">
                    <img src="assets/images/search.png" alt="">
                </div>
                <input type="text" placeholder="搜索内容">
            </div>
        </div>

        <!-- 菜单 -->
        <div class="caidan">
            <div class="emo">
                <div class="emot">
                    <a>
                        <img src="assets/images/cate1.png" alt="">
                        <div>
                            <span>美食</span>
                        </div>
                    </a>
                </div>
                <div class="emot">
                    <a>
                        <img src="assets/images/cate2.png" alt="">
                        <div>
                            <span>甜点</span>
                        </div>
                    </a>
                </div>
                <div class="emot">
                    <a>
                        <img src="assets/images/cate3.png" alt="">
                        <div>
                            <span>牛奶</span>
                        </div>
                    </a>
                </div>
                <div class="emot">
                    <a>
                        <img src="assets/images/cate4.png" alt="">
                        <div>
                            <span>蔬菜</span>
                        </div>
                    </a>
                </div>
                <div class="emot">
                    <a>
                        <img src="assets/images/cate5.png" alt="">
                        <div>
                            <span>茶</span>
                        </div>
                    </a>
                </div>
                <div class="emot">
                    <a>
                        <img src="assets/images/cate6.png" alt="">
                        <div>
                            <span>快餐</span>
                        </div>
                    </a>
                </div>
                <div class="emot">
                    <a>
                        <img src="assets/images/cate7.png" alt="">
                        <div>
                            <span>饮料</span>
                        </div>
                    </a>
                </div>
                <div class="emot">
                    <a>
                        <img src="assets/images/cate8.png" alt="">
                        <div>
                            <span>海鲜</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 广告 -->
        <div class="gg">
            <div class="tu">
                <img src="assets/images/ad1.png" alt="">
            </div>
        </div>

        <!-- 推荐 -->
        <div class="tuijian">
            <div class="titl">
                    <span>美 食</span>
                    <span>更 多</span>
            </div>
            <div class="emo">
                <div class="cot">
                    <div class="one"><img src="assets/images/food1.jpg" alt=""></div>
                    <div class="two">
                        <p>美味蔬果拼盘</p>
                        <h5>￥288</h5>
                        <div><span>3524 </span>人已买</div>
                    </div>
                </div>
                <div class="cot">
                    <div  class="one"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="two">
                        <p>美味蔬果拼盘</p>
                        <h5>￥288</h5>
                        <div><span>3524 </span>人已买</div>
                    </div>
                </div>
                <div class="cot">
                    <div class="one"><img src="assets/images/food.png" alt=""></div>
                    <div class="two">
                        <p>美味蔬果拼盘</p>
                        <h5>￥288</h5>
                        <div><span>3524 </span>人已买</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <footer class="botm">
            <a href="index.html" class="go">
                <div><img src="assets/images/home_act.png" alt=""></div>
                <span>主 页</span>
            </a>
            <a href="index2.html" class="go">
                <div><img src="assets/images/shop.png" alt=""></div>
                <span>店 铺</span>
            </a>
            <a href="index3.html" class="go">
                <div><img src="assets/images/order.png" alt=""></div>
                <span>品 类</span>
            </a>
            <a href="index4.html" class="go">
                <div><img src="assets/images/my.png" alt=""></div>
                <span>我 的</span>
            </a>
        </footer>

    </div>










</body>
</html>
<!-- 解析less的文件 -->
<script src="assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="assets/js/jquery.min.js"></script>